<template>
    <div v-show="bugList.length">
        <table>
            <thead>
                <tr>
                    <!-- <th class="c1">全选<input type="checkbox" :checked="isAll" @change="selectAll" /></th> -->
                    <th class="c1">全选<input type="checkbox" v-model="isAll" /></th>
                    <th>描述</th>
                    <th class="c2">操作</th>
                </tr>
            </thead>
            <tbody>
                <BugItem v-for="(bug, index) of bugList" :key="bug.id" :bugInfo="bug"></BugItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import BugItem from './BugItem.vue';

export default {
    name: 'BugList',
    props: ["bugList"],
    components: { BugItem },
    computed: {
        resolvedCount() {
            return this.bugList.reduce((a, b) => a + (b.resolved ? 1 : 0), 0)
        },
        // isAll() {
        //     return (this.bugList.length === this.resolvedCount) && this.bugList.length > 0
        // }
        isAll: {
            get() {
                return (this.bugList.length === this.resolvedCount) && this.bugList.length > 0
            },
            set(value) {
                this.$emit("selectAllCallback", value)
            }
        }
    }
}
</script>

<style scoped>
/* list */
table {
    width: 760px;
    border-collapse: collapse;
}

table caption {
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0;
}

.c1,
.c2 {
    width: 100px;
}

th {
    border: 1px solid #999;
    text-align: center;
    padding: 5px 0;
}

table thead tr {
    background-color: #008c8c;
    color: #fff;
}
</style>